<template>
  <div class="map-dom" id="mapdom">
    <div class="pointList" v-if="list && list.length > 1">
      <div
        class="point-item"
        @click="setPoint(item)"
        v-for="item in list"
        :key="item.id || item.device_id"
      >
        <p class="text">{{ item.device_name }}</p>
        <p class="text">{{ item.device_type_desc }}</p>
      </div>
    </div>
    <div v-else>
      <!-- <videoPlay
        :currentData="currentPoint"
        v-if="currentPoint.cameraIndexCode"
      ></videoPlay> -->

      <mapnl
        :currentData="currentPoint"
        v-if="
          currentPoint?.noiseLogList?.length > 0 ||
          currentPoint?.waterLogLogList?.length > 0 ||
          currentPoint?.sensorLogInfos?.length > 0 
        "
      />
      <qx :currentData="currentPoint" v-if="route.params.id === 'qxz'"> </qx>
    </div>
  </div>
</template>

<script setup>
import { watch, nextTick } from "vue";
import mapnl from "../map-component/mapnl.vue";
import qx from "./mapqx.vue";
import videoPlay from "../map-component/videoplay.vue";
import { getMapDevicedetail } from "@/api/zlcj.js";
import { MinxfunCoulmns } from "../component/device.js";
const { findSenceType } = MinxfunCoulmns();
const route = useRoute();
const emit = defineEmits(["setPoint"]);
const props = defineProps({
  currentData: {
    type: Object,
    default: {},
  },
});
let currentPoint = ref({});
let list = ref([]);
const setPoint = async (item) => {
  console.log(item);
  // 设置当前点
  // currentPoint.value = item;
  // 调用接口获取设备详情
  try {
    let obj = {
      deviceId: item.device_id,
      sceneCode: await findSenceType(route.params.id),
    };
    const response = await getMapDevicedetail(obj);
    if (route.params.id === "nlfx") {
      // 1001 放视频
      // 3001 传感器-取趋势数据
      if (item.device_type == "3001") {
        currentPoint.value = response.data;
      } else {
        currentPoint.value = response.data;
      }
    } else if (route.params.id === "qxz") {
      currentPoint.value = response.data.weatherInfoPc;
    } else {
      currentPoint.value = response.data;
    }
    list.value = [];
    currentPoint.value.deviceId = item.device_id; // 给选中点位回传deviceId,用于点位回调
    await nextTick();
  } catch (error) {
    console.error("获取设备详情失败:", error);
  }
};
watch(
  () => props.currentData,
  async (newval) => {
    if (!newval) return;
    // 检查是否有 devices 属性且长度大于1
    if (newval.devices?.length > 1) {
      list.value = newval.devices;
      currentPoint.value = newval.devices[0]; // 默认选择第一个设备
    }
    // 检查是否有 devices 属性且长度为1
    else if (newval.devices?.length === 1) {
      try {
        let obj = {
          deviceId: newval.devices[0].device_id,
          sceneCode: await findSenceType(route.params.id),
        };
        const response = await getMapDevicedetail(obj);

        if (route.params.id === "nlfx") {
          // 1001 放视频
          // 3001 传感器-取趋势数据
          if (newval.devices[0].device_type == "3001") {
            currentPoint.value = response.data;
          } else {
            currentPoint.value = response.data.cameraIndexCode;
          }
        } else if (route.params.id === "qxz") {
          currentPoint.value = response.data.weatherInfoPc;
        } else {
          currentPoint.value = response.data;
        }
        currentPoint.value.deviceId = newval.devices[0].device_id; // 给选中点位回传deviceId,用于点位回调
        list.value = [];
      } catch (error) {
        console.error("获取设备详情失败:", error);
      }
    }
    // 如果没有 devices 属性，直接使用传入的数据
    else {
      currentPoint.value = newval;
      list.value = [];
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  currentPoint,
  (newval, oldval) => {
    emit("setPoint", {
      ...newval,
      deviceId: newval.device_id || newval.deviceId,
    });
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.map-dom {
  .pointList {
    width: 215px;
    height: 120px;
    padding: 5px;
    overflow: auto;
    background: #fff;
    cursor: pointer;
    .point-item {
      width: 100%;
      height: 55px;
      padding: 11px 14px 10px 14px;
      &:hover {
        background: rgba(142, 191, 255, 0.72);
        box-shadow: 0px 2px 20px 0px rgba(111, 119, 143, 0.35);
        border-radius: 4px;
        border: 1px solid #2c84ff;
        .text {
          color: #2263bf;
        }
      }
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #666666;
      }
    }
  }
  // .playVideo {
  //   position: absolute;
  //   left: 20px;
  //   bottom: 10px;
  //   width: 450px;
  //   height: 300px;
  //   border: 1px solid red;
  // }
}
</style>
